<template>
  <a-card :bordered="false">
    <!--表头条件搜索  -->
    <a-form-model layout="inline" :model="uatTestform">
      <a-form-model-item
        ><a-input placeholder="作业名称" style="width: 150px" v-model="uatTestform.tranName"></a-input
      ></a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
        ><a-button type="primary" icon="search" @click="handleSubmit">搜索</a-button></a-form-model-item
      >
      <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
        ><a-button type="primary" icon="sync" @click="resetForm">重置</a-button></a-form-model-item
      >
    </a-form-model>
    <br />
    <!-- 主体表格内容 -->
    <div style="margin-bottom: 16px">
      <a-button type="primary" icon="plus" >保存</a-button>&nbsp;&nbsp;
      <a-button type="primary" icon="plus" >提交测试</a-button>&nbsp;&nbsp;
    </div>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
      :pagination="false"
    >
      <a slot="action" slot-scope="text">
        <!-- 展示服务修改按钮 -->
        <a-button type="primary" @click="edit(text)">下载</a-button>
      </a>
    </a-table>
    <br />
    <!-- 分页组件 -->
    <a-pagination v-model="currentpage" :total="total" :pageSize="pageSize" @change="pageChange" />  
    <a-modal v-model="editModal" title="提交测试" width="35%" @ok="submitOK">
      <a-form-model v-bind="layout" ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="变更单号" prop="name" >
            <a-input placeholder="请输入变更单号" v-model="form.name" autocomplete="off"/>
        </a-form-model-item>
        <a-form-model-item label="变更说明" prop="desc" >
            <a-input placeholder="请输入变更说明" v-model="form.desc" autocomplete="off"/>
        </a-form-model-item>
        </a-form-model>
    </a-modal>
  </a-card>
</template>
<script>
import { getStore } from '@/utils/storage'

export default {
  data() {
    return {
      form:{},
      rules:{
        name:[{ required: true, message: '变更单号不能为空', trigger: 'blur' }],
        desc:[{ required: true, message: '变更说明不能为空', trigger: 'blur' }],
      },
      layout:{
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
      },
      editModal:false,
      uatTestform:{},
      currentpage: 1,
      total: 1,
      pageSize: 8,
      data: [
        {'prsId':'HDS-20211122001','caseNum':'HDS项目组','concurrentNum':'统筹资金池历史数据查询','startDate':'待投产',},
        {'prsId':'HDS-20211122002','caseNum':'HDS项目组','concurrentNum':'UT-WLJR-2020-0050手机银行存款频道首页改版的业务需求','startDate':'待投产',},
        {'prsId':'HDS-20211122003','caseNum':'HDS项目组','concurrentNum':'信贷审批流程审批阶段时效查询需求','startDate':'待投产',},
        {'prsId':'HDS-20211122004','caseNum':'HDS项目组','concurrentNum':'打印交易明细优化二期需求(UT-WLJR-2020-1215)','startDate':'待投产',},
        {'prsId':'HDS-20211122005','caseNum':'HDS项目组','concurrentNum':'UT-WLJR-2020-1135 手机银行理财产品收益分析需求','startDate':'待投产',},
        {'prsId':'HDS-20211122006','caseNum':'HDS项目组','concurrentNum':'手机银行存款历史持仓与收益分析的业务需求(UT-WLJR-2020-1007)','startDate':'待投产',},
        {'prsId':'HDS-20211122007','caseNum':'HDS项目组','concurrentNum':'UT-LSYW-2020-0161-关于合格投资者线上认定的优化需求','startDate':'待投产',}
      ],
      columns: [
        { title:'编号',dataIndex: 'prsId', key: 'prsId',width: 180,className:'tableStyle'},
        { title:'项目组',dataIndex: 'caseNum', key: 'caseNum',width: 200,className:'tableStyle'},
        { title:'内容',dataIndex: 'concurrentNum', key: 'concurrentNum',width: 400,className:'tableStyle'},
        { title:'状态',dataIndex: 'startDate', key: 'startDate',width: 150,className:'tableStyle'},
        { title:'日志',key: 'operation', fixed: 'right', width: 200, scopedSlots: { customRender: 'action' } ,className:'tableStyle'},
      ],
      selectedRowKeys: [],
    }
  },

  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },

  created() {
    
  },

  methods: {
    submitOK(){
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    handleSubmit(){

    },

    resetForm(){

    },

    pageChange(){

    },
    
    onSelectChange(selectedRowKeys) {
      //console.log('select', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },    

    edit(text){
      this.editModal=true;
    },

  },
}
</script>
<style >
  .tableStyle{
    font-size: 20px;
    text-align: center; 
  }
  .ant-table-thead > tr > th {
    text-align: center; 
  }
</style>